import React from 'react';

import { ReactComponent as Delete } from '@/assets/images/profile/DeleteFile.svg';
import { Card } from '@/entities/profile/model/reducer';
import cn from 'classnames';

import cs from './PaymentCard.module.scss';

interface Props extends Card {
  onDelete?: (card: Card) => void;
  isActive: boolean;
  onChoose?: (card: Card) => void;
}

export const PaymentCard = React.memo(({ number, system, isActive, onDelete, onChoose }: Props) => (
  <span className={cn(isActive && cs.isActive)} onClick={() => onChoose && onChoose({ number, system })}>
    <div className={cn(cs.card, isActive && cs.card_active)}>
      <span>
        <p className={cs.PS}>{system}</p>
        <span
          onClick={(e) => {
            e.stopPropagation();
            onDelete && onDelete({ number, system });
          }}
        >
          <Delete />
        </span>
      </span>
      <p className={cs.number}>
        **** {number.toString().substring(number.toString().length - 4, number.toString().length)}
      </p>
    </div>
  </span>
));
